<template>
  <div class="admin-edit">
    <el-form
      :model="editForm"
      ref="editForm"
      label-width="70px"
      :rules="rules"
      style="width: 400px; margin: 10px 14px"
    >
      <el-form-item label="账号">
        <el-input
          disabled
          v-model="editForm.adminUname"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="adminPwd">
        <el-input
          v-model="editForm.adminPwd"
          placeholder="请填写密码"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="editForm.name"
          placeholder="请填写姓名"
          autocomplete="off"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select
          v-model="editForm.gender"
          autocomplete="off"
          :clearable="true"
          :popper-append-to-body="false"
          style="width: 120px"
          @input="changeForm"
        >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="editForm.phone"
          placeholder="请填写手机号"
          :clearable="true"
          @input="changeForm"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="editForm.status"
          autocomplete="off"
          :clearable="true"
          :popper-append-to-body="false"
          style="width: 120px"
          @input="changeForm"
        >
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-show="isShow"
          type="success"
          @click="update"
          :loading="updateLoading"
          >更新</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAdminById, updateAdmin } from "@/api/admin/admin";
export default {
  name: "EditAdminView",
  data() {
    return {
      editForm: {},
      copyForm: {},
      isShow: false,
      updateLoading: false,
      rules: {
        adminPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确格式的手机号",
            trigger: "blur",
          },
        ],
        status: { required: true, message: "请选择状态", trigger: "change" },
      },
    };
  },
  props: ["id"],
  created() {
    this.getAdminInfo();
  },
  methods: {
    // 获取管理员信息
    async getAdminInfo() {
      const res = await getAdminById(this.id);
      this.editForm = Object.assign({}, res.data);
      this.copyForm = Object.assign({}, res.data);
      this.editForm.gender = this.editForm.gender.toString();
      this.editForm.status = this.editForm.status.toString();
      this.copyForm.gender = this.copyForm.gender.toString();
      this.copyForm.status = this.copyForm.status.toString();
    },
    // 检测表单数据是否修改
    changeForm() {
      const objectEqual =
        JSON.stringify(this.editForm) === JSON.stringify(this.copyForm);
      if (!objectEqual) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // 更新数据
    update() {
      this.$refs.editForm.validate(async (v) => {
        if (v) {
          try {
            this.updateLoading = true;
            const res = await updateAdmin(this.editForm);
            this.$router.push({
              name: "AdminAdminManage",
            });
          } finally {
            this.updateLoading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.edit-admin {
  width: 100%;
  height: 100%;
}
// 解决下拉框显示不完整问题
/deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}
</style>